@use "@/common/styles/colors"

.select-box
  position: relative
  user-select: none
  cursor: pointer

  &.disabled
    cursor: not-allowed
    opacity: 0.6

    .select-box__selected
      cursor: not-allowed

  &__selected
    padding: 0.8rem
    border: 1px solid colors.$gray
    background-color: colors.$dark-gray
    color: colors.$light-gray
    box-sizing: border-box
    border-radius: 0.7rem
    font-size: 14pt
    width: 100%
    outline: none
    display: flex
    justify-content: space-between
    align-items: center

    @media (max-width: 768px)
      padding: 0.7rem
      font-size: 13pt

    @media (max-width: 480px)
      padding: 0.6rem
      font-size: 12pt

    svg
      width: 1.5rem
      height: 1.5rem

      @media (max-width: 480px)
        width: 1.25rem
        height: 1.25rem

  &__arrow
    margin-left: 10px
    transition: transform 0.3s ease

    &.open
      transform: rotate(180deg)

  &__options
    position: fixed
    border: 1px solid colors.$gray
    background-color: colors.$gray-full
    backdrop-filter: blur(1rem)
    border-radius: 0.7rem
    z-index: 9999

  &__options-scroll
    max-height: 250px
    overflow-y: auto
    overflow-x: hidden
    scrollbar-width: thin
    scrollbar-color: colors.$gray colors.$dark-gray

    @media (max-width: 768px)
      max-height: 200px

    @media (max-width: 480px)
      max-height: 150px

    &::-webkit-scrollbar
      width: 8px

    &::-webkit-scrollbar-track
      background: colors.$dark-gray
      border-radius: 0 0.7rem 0.7rem 0

    &::-webkit-scrollbar-thumb
      background-color: colors.$gray
      border-radius: 10px

  &__option
    padding: 10px
    margin: 5px
    border-radius: 0.7rem
    display: flex
    text-align: center
    justify-content: center
    cursor: pointer

    @media (max-width: 768px)
      padding: 8px
      margin: 4px

    @media (max-width: 480px)
      padding: 6px
      margin: 3px
      font-size: 0.9rem

    &:last-child
      border-bottom: none

    &:hover, &.selected
      background-color: colors.$gray
